<template>
<div class="home">
  <div class="mail_info">
    <div>发件地址：{{from}}</div>
    <div>收件地址：{{to}}</div>
    <div>邮件标题：{{subject}}</div>
    <div>邮件内容：{{text}}</div>
    <button @click="sendMeail()" class="send_btn">发送邮件</button>
  </div>
</div>
</template>
<script>

export default {
  name: 'home',
  data () {
    return {
      from: 'xxxx@qq.com', // 发件地址 
      to: 'xxxx@163.com', // 收件列表 
      subject: 'my test 邮件发送', // 标题 
      html: '<strong>这是标签内容</strong>', // 邮件格式： html 或 text 
      text: '这是文本内容',
    }
  },
  methods: {
    sendMeail () {
      // var params = {
      //   from: this.from,
      //   to: this.to,
      //   subject: this.subject, 
      //   // html: html, 
      //   text: this.text,
      // }
      // 处理跨域的参数问题
      var params = new URLSearchParams();
      params.append('from', this.from);
      params.append('to', this.to);
      params.append('subject', this.subject);
      params.append('text', this.text);

      this.$http.post('http://localhost:8088/home', params)
      .then( res => {
        console.log(res);
      }).catch( err => {
        console.log(err);
      });
    }
  }
}
</script>
<style type="less" scoped>
.home{
  width: 100%;
  height: 100%;
  background: #fcfcfc;
}
.mail_info{
  width: 500px;
  height: 200px;
  line-height: 30px;
  color: #444;
  font-size: 18px;
  background-color: #eee;
}
.mail_info div{
  width: 100%;
  text-align: left;
}
.mail_info .send_btn{
  text-align: right;
}
</style>